<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
    <style>
        *{ margin: 0; padding: 0; }
        
        .header{
            width: 100%; height: 80px; 
            background: rgb(136, 183, 236);
            text-align: center; line-height:80px;
            margin-bottom: 5px;
        }
        .con{
            width: 100%; height: 450px; ;
        }
        .con1{
            display: flex;
        }
        .con1 span{
            width: 100%; height: 85px;
            display: block;
            margin-bottom: 5px;
            background: rgb(240, 243, 221); 
            line-height: 85px; 
        }
        .footer{
            width: 100%; height: 60px; 
            background: rgb(136, 183, 236);
            text-align: center; line-height:60px;
        }
    </style>

</head>
<body>
    <div id="app">
        <myheader></myheader>
        <!-- a.调用子组件时传了个参数 -->
        <mycon :list="list"></mycon>
        <myfooter></myfooter>
    </div>
    
    <script>
        // 电话本实例: 分为：头部、中间、尾部   中间：5个item
        // 一共建4个

        /********************************************/
        //创建孙子组件 item
        //列表孙子，属于mycon的子节点
        var item = {
            props:["item"],
            template:`<li class="con1">
                        <span>{{item.id}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.phone}}</span>
                      </li>`
        };

        /********************************************/
        // 1.创建子组件
        // 头部
        var myheader = {
            template:`<div class="header">电话号码簿</div>`
        };

        // 中间
        var mycon = {
            // b.子组件接收参数
            //注意：props接收的数据和data的数据一样使用
            props:["list"],
            mounted () {
                //c.查看数据在子组件是否接收到
                console.log(this.list);
            },
            template:`<div class="con">
                        <ul>
                            <!-- b.1. 使用接收的参数 -->
                            <item v-for="item in list" :item="item" :key="item.id"></item>
                        </ul>
                     </div>`,
            //注册
            components:{
                item
            },
        };

        // 尾部
        var myfooter = {
            template:`<div class="footer">版权：© 归web0426班所有</div>`
        };

        /********************************************/

        // vue的根节点
        var app = new Vue({
            el:"#app",
            data:{
                list:[ //电话号码数据
                    { "id": 1, "name": "斯琴高娃", "phone": "13412340987" },
					{ "id": 2, "name": "高晓松", "phone": "13512340987" },
					{ "id": 3, "name": "迪丽热巴", "phone": "13612341234" },
					{ "id": 4, "name": "韩红", "phone": "13312340987" },
					{ "id": 5, "name": "梁朝伟", "phone": "15812340987" },
                ],
            },
            //引入组件 注册
            components:{
                myheader,mycon,myfooter
            },
        });
    </script>
</body>
</html>